<template>
  <div class="container">
    <div class="inp"><input type="text" v-model="keywords" @keyup.enter="handleSort" placeholder="请输入分类..." autofocus />
    </div>
    <div :class="['music', index % 2 ? 'music-red' : '']" @click="handleDel(list)" v-for="(list, index) in lists"
      :key="list.id"><img class="music-pic" :src="list.coverImgUrl" alt="">
      <span>播放量:{{ formatPlayCount(list.playCount) }}</span>
      <p>{{ list.name }}</p>
      <span>by {{ list.creator.nickname }}</span>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from "vue"
import axios from "axios"
//绑定输入框数据
const keywords = ref("")
//定义歌单数据
const lists = ref([])
//获取歌单数据
onMounted(() => {
  axios.get("http://122.112.161.135:3000/top/playlist?cat=华语").then((res) => {
    const { playlists } = res.data
    lists.value = playlists
  })
})
//定义分类
function handleSort() {
  axios.get(`http://122.112.161.135:3000/top/playlist?cat=${keywords.value}`).then((res) => {
    const { playlists } = res.data
    lists.value = playlists
  })
  keywords.value = ""
}
//定义删除函数
function handleDel(list) {
  lists.value.splice(lists.value.indexOf(list), 1)
}
//格式化播放量:播放量大于10万时,加万字
const formatPlayCount = computed(() => {
  return (num) => {
    if (num >= 100000) {
      return `${Math.floor(num / 100000)}万`
    } else {
      return num
    }
  }
})
</script>
<style lang="stylus" scoped>
.container
  width 966px
  background #fff
  border-left:1px solid #c1c1c1
  border-right:1px solid #c1c1c1
  border-bottom:1px solid #c1c1c1
  padding:40px
  margin:0 auto 50px auto
  vertical-align:bottom
  display flex
  flex-wrap wrap
  justify-content:space-between
  color #333
  .music
    width 160px
    height 243px
    border 2px solid #44ac91
    margin-bottom 20px
    font-size 12px
    .music-pic
      width 100%
      height 160px
    p
      // 超出显示省略号
      white-space: nowrap;
      overflow:hidden
      text-overflow:ellipsis
      font-size 14px
      margin 5px
    span
      margin 5px
  .music-red
    border 2px solid #c20c0c
.inp
  width 100%
  height 40px
  margin-bottom 20px
  display flex
  input 
    width 200px
    margin 0 auto
</style>